<template>
    <div class="teacher-certification">
        <h2>教师资格认证</h2>
        <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
            <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="formData.realName" placeholder="请输入真实姓名"></el-input>
            </el-form-item>

            <el-form-item label="出生日期" prop="birthDate">
                <el-date-picker v-model="formData.birthDate" type="date" placeholder="选择出生日期"></el-date-picker>
            </el-form-item>

            <el-form-item label="学历" prop="education">
                <el-select v-model="formData.education" placeholder="请选择学历">
                    <el-option label="专科" value="专科"></el-option>
                    <el-option label="本科" value="本科"></el-option>
                    <el-option label="硕士" value="硕士"></el-option>
                    <el-option label="博士" value="博士"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="专业" prop="major">
                <el-input v-model="formData.major" placeholder="请输入专业"></el-input>
            </el-form-item>

            <el-form-item label="学校" prop="school">
                <el-input v-model="formData.school" placeholder="请输入学校名称"></el-input>
            </el-form-item>

            <el-form-item label="所在省份" prop="province">
                <el-select v-model="formData.province" placeholder="请选择省份">
                    <el-option v-for="province in provinces" :key="province" :label="province" :value="province"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="可授科目" prop="subjects">
                <el-select v-model="formData.subjects" multiple placeholder="请选择可授科目">
                    <el-option v-for="subject in subjects" :key="subject" :label="subject" :value="subject"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="详细住址" prop="address">
                <el-input v-model="formData.address" type="textarea" placeholder="请输入详细住址"></el-input>
            </el-form-item>

            <el-form-item label="个人介绍" prop="introduction">
                <el-input v-model="formData.introduction" type="textarea" placeholder="请输入个人介绍"></el-input>
            </el-form-item>

            <el-form-item label="授课安排" prop="teachingSchedule">
                <el-input v-model="formData.teachingSchedule" type="textarea" placeholder="请输入授课安排"></el-input>
            </el-form-item>

            <el-form-item label="身份证照片" prop="idCardPhoto">
                <el-upload
                    class="upload-demo"
                    :http-request="uploadIdCard"
                    :show-file-list="false"
                    accept="image/*">
                    <el-button type="primary">上传身份证照片</el-button>
                </el-upload>
                <el-image v-if="formData.idCardPhoto" :src="formData.idCardPhoto" class="preview-image"></el-image>
            </el-form-item>

            <el-form-item label="学历证书照片" prop="certificatePhoto">
                <el-upload
                    class="upload-demo"
                    :http-request="uploadCertificate"
                    :show-file-list="false"
                    accept="image/*">
                    <el-button type="primary">上传学历证书照片</el-button>
                </el-upload>
                <el-image v-if="formData.certificatePhoto" :src="formData.certificatePhoto" class="preview-image"></el-image>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">提交认证</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { teacherService } from '@/api/teacher'

const formRef = ref(null)
const formData = ref({
    realName: '',
    birthDate: '',
    education: '',
    major: '',
    school: '',
    province: '',
    subjects: [],
    address: '',
    introduction: '',
    teachingSchedule: '',
    idCardPhoto: '',
    certificatePhoto: ''
})

// 省份列表
const provinces = [
    '北京市', '上海市', '天津市', '重庆市', '河北省', '山西省', '辽宁省', '吉林省',
    '黑龙江省', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省',
    '湖北省', '湖南省', '广东省', '海南省', '四川省', '贵州省', '云南省', '陕西省',
    '甘肃省', '青海省', '台湾省', '内蒙古自治区', '广西壮族自治区', '西藏自治区',
    '宁夏回族自治区', '新疆维吾尔自治区', '香港特别行政区', '澳门特别行政区'
]

// 科目列表
const subjects = [
    '语文', '数学', '英语', '物理', '化学', '生物', '政治', '历史', '地理',
    '音乐', '美术', '体育', '信息技术', '通用技术'
]

// 表单验证规则
const rules = {
    realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
    birthDate: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
    education: [{ required: true, message: '请选择学历', trigger: 'change' }],
    major: [{ required: true, message: '请输入专业', trigger: 'blur' }],
    school: [{ required: true, message: '请输入学校名称', trigger: 'blur' }],
    province: [{ required: true, message: '请选择省份', trigger: 'change' }],
    subjects: [{ required: true, message: '请选择可授科目', trigger: 'change' }],
    address: [{ required: true, message: '请输入详细住址', trigger: 'blur' }],
    introduction: [{ required: true, message: '请输入个人介绍', trigger: 'blur' }],
    teachingSchedule: [{ required: true, message: '请输入授课安排', trigger: 'blur' }],
    idCardPhoto: [{ required: true, message: '请上传身份证照片', trigger: 'change' }],
    certificatePhoto: [{ required: true, message: '请上传学历证书照片', trigger: 'change' }]
}

// 上传身份证照片
const uploadIdCard = async (options) => {
    try {
        const response = await teacherService.uploadDocument(options.file)
        formData.value.idCardPhoto = response.data
        ElMessage.success('身份证照片上传成功')
    } catch (error) {
        ElMessage.error('身份证照片上传失败')
    }
}

// 上传学历证书照片
const uploadCertificate = async (options) => {
    try {
        const response = await teacherService.uploadDocument(options.file)
        formData.value.certificatePhoto = response.data
        ElMessage.success('学历证书照片上传成功')
    } catch (error) {
        ElMessage.error('学历证书照片上传失败')
    }
}

// 提交表单
const submitForm = async () => {
    if (!formRef.value) return
    
    await formRef.value.validate(async (valid) => {
        if (valid) {
            try {
                const submitData = {
                    ...formData.value,
                    subjects: formData.value.subjects.join(','),
                    birthDate: formData.value.birthDate.toISOString().split('T')[0]
                }
                
                await teacherService.submitTeacherInfo(submitData)
                ElMessage.success('认证信息提交成功，请等待审核')
                resetForm()
            } catch (error) {
                ElMessage.error(error.message || '提交失败')
            }
        }
    })
}

// 重置表单
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

// 获取已有的教师认证信息
const getTeacherInfo = async () => {
    try {
        const response = await teacherService.getTeacherInfo()
        if (response.data) {
            const data = response.data
            formData.value = {
                ...data,
                subjects: data.subjects ? data.subjects.split(',') : [],
                birthDate: data.birthDate ? new Date(data.birthDate) : ''
            }
        }
    } catch (error) {
        // 完全不展示"未找到教师认证信息"的错误
        if (error.response?.data?.message === "未找到教师认证信息" || 
            error.response?.data?.message?.includes("未找到教师认证信息")) {
            console.log('首次访问教师认证页面，无历史认证信息')
            return
        }
        // 其他错误才显示错误提示
        ElMessage.error('获取认证信息失败：' + (error.response?.data?.message || error.message))
    }
}

onMounted(async () => {
    await getTeacherInfo()
})
</script>

<style scoped>
.teacher-certification {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.preview-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin-top: 10px;
}

.el-select {
    width: 100%;
}
</style> 